<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>画廊-2018 世界杯淘汰赛</title>
</head>

<body>
  <style>
  #mountNode {
    width: 760px; 
    height: 744px;
    background: url(https://gw.alipayobjects.com/zos/rmsportal/OSujrQtOvnOJVzRLmfIP.png);
  }
  </style>
  <div id="mountNode"></div>
  <script src="../build/g6.js"></script>
  <script src="./assets/jquery-3.2.1.min.js"></script>
  <script src="../build/plugin.edge.polyline.js"></script>
  <script>
    $.getJSON('./assets/data/world-cup-knockout-match.json', data => {
      G6.registerNode('card', {
        draw(item) {
          const group = item.getGraphicGroup();
          const model = item.getModel();
          const scoreTextStyle = {
            textAlign: 'center',
            fontWeight: 900,
            fontSize: 14,
            fill: '#000'
          };
          const teamNameTextStyle = {
            textAlign: 'center',
            fontSize: 12,
            fill: 'rgba(0, 0, 0, 0.45)'
          };
          const width = 134;
          const height = 60;
          const keyShape = group.addShape('rect', {
            attrs: {
              x: 0,
              y: 0,
              width,
              height,
              fill: '#fff',
              radius: 4,
            }
          });
          group.addShape('image', {
            attrs: {
              x: 8,
              y: 8,
              width: 40,
              height: 24,
              img: model.flagA
            }
          });
          group.addShape('image', {
            attrs: {
              x: 86,
              y: 8,
              width: 40,
              height: 24,
              img: model.flagB
            }
          });
          group.addShape('text', {
            attrs: {
              ...teamNameTextStyle,
              x: 28,
              y: 52,
              text: model.teamA,
            }
          });
          group.addShape('text', {
            attrs: {
              ...teamNameTextStyle,
              x: 106,
              y: 52,
              text: model.teamB,
            }
          });
          group.addShape('text', {
            attrs: {
              ...scoreTextStyle,
              x: 67,
              y: 52,
              text: model.scoreA + ' : '+ model.scoreB,
            }
          });
          return keyShape;
        },
        anchor(node) {
          const hierarchy = node.getHierarchy();
          const parent = node.getParent();
          if(parent && hierarchy > 2) {
            const bbox = node.getBBox();
            const parentBBox = parent.getBBox();
            if(parentBBox.centerY > bbox.centerY) {
              return [
                [0, 0.5],
                [1, 0.5],
                [0.5, 1]
              ]
            } else {
              return [
                [0, 0.5],
                [1, 0.5],
                [0.5, 0],
              ]
            }
          }
          return [
            [0, 0.5],
            [1, 0.5],
            [0.5, 0],
            [0.5, 1]
          ]
        }
      });
      const layout = new G6.Layouts.CompactBoxTree({
        direction: 'V',
        getHGap() {
          return 12;
        },
        getVGap() {
          return 16;
        }
      });
      const tree = new G6.Tree({
        container: 'mountNode',
        width: 760,
        height: 744,
        layout,
        fitView: 'cc'
      });
      tree.node({
        shape: 'card'
      });
      tree.edge({
        shape: 'polyline-round',
        style: {
          stroke: 'white',
          lineWidth: 1,
          strokeOpacity: 1
        }
      });
      tree.read(data);
    })
  </script>
</body>
</html>
